$unit: px;
$text-base: 16;
$padding-base: 10;
$margin-base: 10;

$text-main: #303133;
$text-normal: #606266;
$text-info: #909399;
$text-place:#C0C4CC;

$text-primary: #5b3cc4;
$text-success: rgb(23, 201, 100);
$text-danger: rgb(242, 19, 93);
$text-warning: rgb(255, 130, 0);


$fz-lx: 1.35* $text-base + $unit;
$fz-l: 1.3* $text-base + $unit;
$fz-nx: 1.1* $text-base + $unit;
$fz-n: 1 * $text-base + $unit;
$fz-sx: 0.9 * $text-base + $unit;
$fz-s: 0.8 * $text-base + $unit;


$plx: 5 * $padding-base + $unit;
$pl: 3 * $padding-base + $unit;
$pnx: 2 * $padding-base + $unit;
$pn: 1 * $padding-base + $unit;
$ps: 0.5 * $padding-base + $unit;


$mlx: 5 * $margin-base + $unit;
$ml: 3 * $margin-base + $unit;
$mnx: 2 * $margin-base + $unit;
$mn: 1 * $margin-base + $unit;
$ms: 0.5 * $margin-base + $unit;



$border-1: #DCDFE6;
$border-2: #E4E7ED;
$border-3: #EBEEF5;
$border-4: #F2F6FC;

.text-{
  &info{
    color: $text-info;
  }
  &primary{
    color: $text-primary;
  }
  &success{
    color: $text-success;
  }
  &danger{
    color: $text-danger;
  }
  &warning{
    color: $text-warning;
  }
}

.p {
  &s{
    padding: $ps;
    &y{
      padding-top: $ps;
      padding-bottom: $ps;
    }
    &x{
      padding-left: $ps;
      padding-right: $ps;
    }
    &l{
      padding-left: $ps;
    }
    &t{
      padding-top: $ps;
    }
    &r{
      padding-right: $ps;
    }
    &b{
      padding-bottom: $ps;
    }
  }
  &n{
    padding: $pn;
    &y{
      padding-top: $pn;
      padding-bottom: $pn;
    }
    &x{
      padding-left: $pn;
      padding-right: $pn;
    }
    &l{
      padding-left: $pn;
    }
    &t{
      padding-top: $pn;
    }
    &r{
      padding-right: $pn;
    }
    &b{
      padding-bottom: $pn;
    }
  }
  &l{
    padding: $pl;
    &y{
      padding-top: $pl;
      padding-bottom: $pl;
    }
    &x{
      padding-left: $pl;
      padding-right: $pl;
    }
    &l{
      padding-left: $pl;
    }
    &t{
      padding-top: $pl;
    }
    &r{
      padding-right: $pl;
    }
    &b{
      padding-bottom: $pl;
    }
  }
}

.m {
  &s{
    margin: $ms;
    &y{
      margin-top: $ms;
      margin-bottom: $ms;
    }
    &x{
      margin-left: $ms;
      margin-right: $ms;
    }
    &l{
      margin-left: $ms;
    }
    &t{
      margin-top: $ms;
    }
    &r{
      margin-right: $ms;
    }
    &b{
      margin-bottom: $ms;
    }
  }
  &n{
    margin: $mn;
    &y{
      margin-top: $mn;
      margin-bottom: $mn;
    }
    &x{
      margin-left: $mn;
      margin-right: $mn;
    }
    &l{
      margin-left: $mn;
    }
    &t{
      margin-top: $mn;
    }
    &r{
      margin-right: $mn;
    }
    &b{
      margin-bottom: $mn;
    }
  }
  &l{
    margin: $ml;
    &y{
      margin-top: $ml;
      margin-bottom: $ml;
    }
    &x{
      margin-left: $ml;
      margin-right: $ml;
    }
    &l{
      margin-left: $ml;
    }
    &t{
      margin-top: $ml;
    }
    &r{
      margin-right: $ml;
    }
    &b{
      margin-bottom: $ml;
    }
  }
}

.cursor-{
  &pointer{
    cursor: pointer;
  }
}


















